<template>
  <div class="pairing-box">
    <heard />
    <div class="body-box">
      <div class="match-success-page">
        <div class="text">
          Match Successful
        </div>
        <div class="confetti-container">
          <div v-for="i in 500" :key="i" :class="`confetti confetti-${i}`" />
        </div>
        <div class="cards-container">
          <div class="card card-left">
            <img :src="getImageUrl(UseUser.userInfo.imgs)" alt="User 1">
          </div>
          <div class="card card-right">
            <img :src="getImageUrl(UseUser.peiduiImg)" alt="User 2">
          </div>
          <div class="checkmark">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
              <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="#FFFFFF" />
              <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import useUserStore from "@/stores/modules/user.ts"

const UseUser = useUserStore()
const router = useRouter()
setTimeout(() => {
  //
  router.push('/home')
}, 4000)

function getImageUrl(img: string): string {
  return new URL(`/src/assets/pic/${img}.png`, import.meta.url).href
}
</script>

<style lang="scss" scoped>
.pairing-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f0f2f5;
  overflow: hidden;

  .body-box {
    width: 100%;
    height: 100%;

    .match-success-page {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: 'Arial', sans-serif;
      overflow: hidden;
      position: relative;

      .text {

        font-size: 40px;
        font-weight: bold;
        color: #2c3e50;
        margin-top: -240px;
        margin-bottom: 100px;
        opacity: 0;
        transform: translateY(-50px);
        animation: fade-in-down 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards;
      }
    }

    .cards-container {
      position: relative;
      width: 400px;
      height: 450px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card {
      position: absolute;
      width: 320px;
      height: 400px;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      background-color: #fff;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .card-left {
      z-index: 1;
      opacity: 0;
      animation: slide-and-collide-left 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    .card-right {
      z-index: 2;
      opacity: 0;
      animation: slide-and-collide-right 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    @keyframes slide-and-collide-left {
      0% {
        transform: translateX(-100vw) rotate(-70deg);
        opacity: 0;
      }

      60% {
        transform: translateX(20px) rotate(-20deg);
        opacity: 1;
      }

      80% {
        transform: translateX(-140px) rotate(-50deg);
      }

      100% {
        transform: translateX(-120px) rotate(-45deg);
        opacity: 1;
      }
    }

    @keyframes slide-and-collide-right {
      0% {
        transform: translateX(100vw) rotate(50deg);
        opacity: 0;
      }

      60% {
        transform: translateX(-20px) rotate(20deg);
        opacity: 1;
      }

      80% {
        transform: translateX(65px) rotate(30deg);
      }

      100% {
        transform: translateX(45px) rotate(25deg);
        opacity: 1;
      }
    }

    @keyframes fade-in-down {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .checkmark {
      position: absolute;
      width: 80px;
      height: 80px;
      z-index: 3;
      transform: translate(-55%, 50%) scale(0);
      opacity: 0;
      animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards;

      .checkmark__circle {
        stroke-dasharray: 166;
        stroke-dashoffset: 166;
        stroke-width: 5;
        stroke-miterlimit: 10;
        stroke: #22a7f0;
        fill: #fff;
        animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) 1.5s forwards;
      }

      .checkmark__check {
        transform-origin: 50% 50%;
        stroke-dasharray: 48;
        stroke-dashoffset: 48;
        stroke-width: 5;
        stroke-linecap: round;
        stroke: #22a7f0;
        animation: stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 1.9s forwards;
      }
    }

    @keyframes stroke {
      100% {
        stroke-dashoffset: 0;
      }
    }

    @keyframes pop-in {
      to {
        transform: translate(-55%, 50%) scale(1);
        opacity: 1;
      }
    }

    .confetti-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 10;
      pointer-events: none;
    }

    .confetti {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #f00;
      opacity: 0;
      animation: confetti-fall 4s ease-out forwards;
    }

    @keyframes confetti-fall {
      0% {
        opacity: 1;
        transform: translateY(-10vh) rotateZ(0deg);
      }

      100% {
        opacity: 0;
        transform: translateY(110vh) rotateZ(720deg);
      }
    }

    @for $i from 1 through 50 {
      .confetti-#{$i} {
        left: percentage(random());
        animation-delay: #{(random(40) / 10)}s;
        width: #{random(10) + 6}px;
        height: #{random(6) + 6}px;
        background-color: hsla(random(360), 100%, 50%, 1);
      }
    }
  }
}
</style>
